var arc_x = 180;//旋转密码锁的x轴位置
var arc_y = 390;//旋转密码锁的y轴位置
var arc_r = 100;//旋转密码锁的半径
var arc_outer_color = "#DAC6AD";//旋转密码锁的外圈颜色
var arc_inside_color = "#8E5B3D";//旋转密码锁的内圈颜色
var number = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];//密码组合
var number_size = 30;//密码字体大小
var number_color = "#000000";//密码字体颜色
var pointer_size = 3;//指针的宽度
var pointer_color = "#FF0000";//指针的颜色
var pointer_length = arc_r - number_size;//指针的长度
var password = "121298";//设置的密码
var time_interval = 5;//旋转锁消失的时间间隔
var now_password;
var ctx;
var now_k;
var isShow_canvas;
var time;
var intervalID;

export default {
    data: {
        isShow_image: true
    },
    onInit() {
        now_password = "";
        isShow_canvas = false
        time = 0;
        intervalID = null;
        this.top = arc_y - (arc_r * (0.004 * arc_r + 0.9)) / 2;
        this.left = arc_x - (arc_r * (0.004 * arc_r + 0.9)) / 2;
        this.width = arc_r * (0.004 * arc_r + 0.9);
        this.height = arc_r * (0.004 * arc_r + 0.9);
        this.isShow_image= true;
    },
    draw_outerlock() {//绘制旋转锁的外圈
        ctx = this.$refs.canvas.getContext('2d');

        ctx.fillStyle = arc_outer_color;
        ctx.strokeStyle = arc_outer_color;
        ctx.beginPath();
        ctx.arc(arc_x, arc_y, arc_r + 4, 0, Math.PI*2);
        ctx.stroke();
        ctx.fill();

        ctx.fillStyle = "#FFFFFF";
        ctx.strokeStyle = "#FFFFFF";
        const a = Math.PI * 2 / number.length;
        for (let i = 0; i < number.length; i++) {
            ctx.beginPath();
            ctx.arc(arc_x + Math.sin(a * i) * (arc_r - number_size / 2), arc_y - Math.cos(a * i) * (arc_r - number_size / 2), number_size / 2, 0, Math.PI*2);
            ctx.stroke();
            ctx.fill();
        }

        ctx.fillStyle = number_color;
        ctx.strokeStyle = number_color;
        ctx.font = number_size.toString() + "px sans-serif";
        for (let i = 0; i < number.length; i++) {
            ctx.fillText(number[i].toString(), arc_x - number_size / 4 + Math.sin(a * i) * (arc_r - number_size / 2), arc_y + number_size / 4 - Math.cos(a * i) * (arc_r - number_size / 2) + 3);
        }
    },
    draw_insidelock(k){//绘制旋转锁的内圈
        ctx.fillStyle = arc_inside_color;
        ctx.strokeStyle = arc_inside_color;
        ctx.beginPath();
        ctx.arc(arc_x, arc_y, arc_r - number_size - 4, 0, Math.PI*2);
        ctx.stroke();
        ctx.fill();

        const a = Math.PI * 2 / number.length;

        ctx.strokeStyle = pointer_color;
        ctx.beginPath();
        ctx.lineWidth = pointer_size;
        ctx.moveTo(arc_x + Math.sin(a * k) * (arc_r - number_size - 4), arc_y - Math.cos(a * k) * (arc_r - number_size - 4));
        ctx.lineTo(arc_x, arc_y - arc_r + number_size + pointer_length);
        ctx.stroke();
    },
    touch_move(msg){//拖动旋转锁
        time = 0;
        let now_x = msg.touches[0].globalX;
        let now_y = msg.touches[0].globalY;
        const start_x = arc_x;
        const start_y = arc_y - arc_r + number_size;
        let degree = -1;
        let move = 0;
        const sum = number.length * 3;
        const degree_move = Math.PI * 2 / sum;

        if((now_x - arc_x) * (now_x - arc_x) + (now_y - arc_y) * (now_y - arc_y) <= (arc_r - number_size) * (arc_r - number_size)){
            var A = Math.sqrt((start_x - arc_x) * (start_x - arc_x) + (start_y - arc_y) * (start_y - arc_y));
            var B = Math.sqrt((now_x - arc_x) * (now_x - arc_x) + (now_y - arc_y) * (now_y - arc_y));
            var C = Math.sqrt((start_x - now_x) * (start_x - now_x) + (start_y - now_y) * (start_y - now_y));
            degree = Math.acos((A * A + B * B - C * C) / (2 * A * B));
        }

        if(degree >= 0){
            if(degree_move * (sum / 2 - 0.5) <= degree && degree <= degree_move * (sum / 2 + 0.5)){
                move = sum / 2;
            }else if(degree <= degree_move * 0.5 && now_x < start_x){
                move = 0;
            }else{
                move = Math.floor(degree / degree_move);
                if(now_x < start_x){
                    move = sum - move;
                }
            }
        }

        if(now_k == 0){
            if(sum - move < 2){
                this.draw_insidelock(move / 3);
                now_k = move;
            }else if(move - now_k < 2){
                this.draw_insidelock(move / 3);
                now_k = move;
            }
        }else if(move - now_k < 2){
            this.draw_insidelock(move / 3);
            now_k = move;
        }
    },
    touch_end(){//复原旋转锁
        time = 0;
        let k = Math.floor(now_k / 3);
        if(now_k % 3 == 0){
            now_password = now_password + number[k];
            this.draw_password();
        }
        now_k = 0;
        this.draw_insidelock(now_k);

        if(password.length == now_password.length){
            if(password == now_password){
                this.draw_succeed();
            }else{
                now_password = "";
                this.draw_fail();
            }
            ctx.clearRect(120, 170, 30 * password.length, 30);
        }
    },
    draw_password(){//绘制当前密码
        ctx.clearRect(120, 70, 150, 40);
        ctx.fillStyle = number_color;
        ctx.strokeStyle = number_color;
        ctx.font = "30px sans-serif";
        ctx.fillText(now_password,120,200);
    },
    draw_succeed(){//解锁成功事件
        ctx.fillStyle = number_color;
        ctx.strokeStyle = number_color;
        ctx.font = "30px sans-serif";
        ctx.fillText("解锁成功！",120,100);
    },
    draw_fail(){//解锁失败事件
        ctx.fillStyle = number_color;
        ctx.strokeStyle = number_color;
        ctx.font = "30px sans-serif";
        ctx.fillText("解锁失败！",120,100);
    },
    run(){
        if(isShow_canvas){
            time++;
        }
        if(time == time_interval){
            ctx.clearRect(arc_x - arc_r - 6, arc_y - arc_r - 6, arc_x + arc_r, arc_y + arc_r);
            ctx.clearRect(120, 170, 30 * password.length, 30);
            ctx.clearRect(120, 70, 150, 40);
            isShow_canvas = false;
            this.isShow_image = true;
            clearInterval(intervalID);
        }
    },
    click(){
        if(!isShow_canvas){
            this.draw_outerlock();
            this.draw_insidelock(0);
            this.isShow_image = false;
            isShow_canvas = true;
            now_password = "";
            time = 0;
            intervalID = setInterval(this.run, 1000);
        }
    }
}
